iT邦幫忙

2021 iThome 鐵人賽

DAY 10
1
Modern Web

快搭上姐姐的`微`前端便車系列 第 10

第10車廂-你今天table了嗎?tableRWD+簡易分頁應用篇

  • 分享至 

  • xImage
  •  

本篇延續<第9車廂-使用content:attr()實現tableRWD應用>的版,透過程式自動產生假title<th>,並製作簡單的分頁功能

首先先複習一下昨篇提到的,透過<td>先事先打上data-th="我是th名稱"

 <td data-th="信用卡公司">兆豐銀行</td>
        <td data-th="回饋 / 名額">$300 產品(限量8萬名)<br>最高5千抽獎</td>
        <td data-th="五倍券優惠活動">期限綁定台灣Pay/信用卡,可享一次抽獎,最高獎金5千元(110/12/31前)</td>
       ....等

,之後再透過::before {content: attr(data-th);....}讓文字顯現出來

      td::before {
        color: #01977a;
        text-indent: -1rem;
        content: attr(data-th);
        font-weight: bold;
        display: block;
      }

但是因為
1.欄位很多時,就要手動一個一個key data-th="XXX"嗎?這樣不是很麻煩嗎?
2.範例資料是死的,真正工作上的資料是抓api後回傳的,所以我們也無法先都手動key好
所以我們今天就改寫成
HTML

/*html*/
<table id="" class="table_change">
  <thead>
    <tr>
      <th>信用卡公司</th>
      <th>回饋 / 名額</th>
      <th>五倍券優惠活動</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>兆豐銀行</td>
      <td>$300 產品(限量8萬名)<br>最高5千抽獎</td>
      <td>期限綁定台灣Pay/信用卡,可享一次抽獎,最高獎金5千元(110/12/31前)</td>
    </tr>
    
    <tr>
    ...
    </tr>

  </tbody>
</table>

jq

$(function () {
  let $table = $(".table_change"); //抓table class
  let $thRows = $table.find("thead th");  //找到每個th
  $thRows.each(function (key, thRow) { //key是0開始
    $table
      .find("tbody tr td:nth-child(" + (key + 1) + ")") //選擇器第一個元素是1開始
      .attr("data-th", $(thRow).text());// 將每個td塞入data-th="對應的<th>名稱"
  });
/*-----------*/
});

這樣就還是完成啦!

那有時候總會碰到多筆資料的時候吧?
我們可以做一個簡單的分頁,像這樣

分頁範例


而除了可以按"上一頁""下一頁"外,也能讓使用者輸入跳入該頁,
HTML

<div id="pageModule">
</div>

<div id="numberPageModule">
  <label for="numberPage">跳至第</label>
  <input id="numberPage" type="number" value="1" min="1" max="100">頁
</div>

<table id="" class="table_change">
  <thead>
    <tr>
      <th>信用卡公司</th>
      <th>回饋 / 名額</th>
      <th>五倍券優惠活動</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>兆豐銀行</td>
      <td>$300 產品(限量8萬名)<br>最高5千抽獎</td>
      <td>期限綁定台灣Pay/信用卡,可享一次抽獎,最高獎金5千元(110/12/31前)</td>
    </tr>
    
    //等多筆資料<tr>....</tr>
    
  </tbody>
</table>

jq

goPage(參數1,參數2)為我們換頁的function,參數第一個放的是目前頁數第二個放一頁要秀幾筆

$(function () {
  /*----產生data-th-----*/
  let $table = $(".table_change");
  let $thRows = $table.find("thead th");
  $thRows.each(function (key, thRow) {
    $table
      .find("tbody tr td:nth-child(" + (key + 1) + ")")
      .attr("data-th", $(thRow).text());
  });
  /*-----------*/
  goPage(1, 2); // 一開始先秀第一頁,以及每一頁最多兩筆資料
});

再來
我們假設每一頁只能有兩筆資料顯示

function goPage(currentPage, pageSize) {
  
    var tr = $(".table_change tbody tr");
    var num = $(".table_change tbody tr").length; //表格所有行數
    var totalPage = Math.ceil(num / pageSize ); // 表格所有行數/每頁顯示行數 = 總頁數
  
    $('#numberPage').attr('max',totalPage); // 寫入跳至第幾頁input
  
    $("#numberPage").off('change').on("change",function(){ // 當"跳至第幾頁"改變時....
      let numberPage =  $("#numberPage").val();//使用者輸入要跳頁的值
      if( numberPage > totalPage ){ //如果輸入超過總頁數,就跳出行為
        console.log("頁數超過")
        return
     }
      goPage(numberPage, 2);//如果是正常的值,就執行換頁,一樣每頁顯示兩筆
    });
 
    var startRow = (currentPage - 1) * pageSize + 1; //開始顯示的行
    var endRow = currentPage * pageSize; //結束顯示的行
    endRow = (endRow > num) ? num : endRow; 
  
  
    //遍歷顯示資料實現分頁
    for (var i = 1; i < (num + 1); i++) {
        var trRow = tr[i - 1];
        if (i >= startRow && i <= endRow) {
            trRow.style.display = "";
        } else {
            trRow.style.display = "none";
        }
    }
    
    //寫入於<div id="pageModule">中
    
    var tempStr = "";
    //如果目前頁數大於1,則可以按首頁跟上一頁
    if (currentPage > 1) {
        tempStr += `<a href="javascript:;" onClick="goPage(1,${pageSize})">首頁</a>`;
        tempStr += `<a href="javascript:;" onClick="goPage(${currentPage - 1},${pageSize})">上一頁</a>`;      
    } else {
        tempStr += `<a href="javascript:;" class="disabled">首頁</a>`;
        tempStr += `<a href="javascript:;" class="disabled">上一頁</a>`;
    }
  //放入頁碼 EX:1/5
        tempStr += `<div><span>第${currentPage}頁</span>/<span>共${totalPage}頁</span></div>`;
        
  //如果目前頁數小於總頁數,則無法按下一頁及尾頁
  
    if (currentPage < totalPage) {
        tempStr += `<a href="javascript:;" onClick="goPage(${currentPage + 1},${pageSize})">下一頁</a>`;
        tempStr += `<a href="javascript:;" onClick="goPage(${totalPage},${pageSize})">尾頁</a>`;
    } else {
        tempStr += `<a href="javascript:;" class="disabled">下一頁</a>`;
        tempStr += `<a href="javascript:;" class="disabled">尾頁</a>`;
    }

    $("#pageModule").html(tempStr);
}

附上完整程式碼
透過這對新手相較易懂的範例後,之後就能再加強挑戰除了"上一頁""下一頁"外,能有頁碼出現的那種,或者可以選擇每一頁的顯示筆數拉!

本篇參考資料:
https://codepen.io/yidas/pen/eEaKRO

https://mrcodingroom.freesite.host/js%E7%B0%A1%E5%96%AE%E6%8F%9B%E9%A0%81%E7%A8%8B%E5%BC%8F%E7%A2%BC%E5%88%86%E4%BA%AB/


上一篇
第9車廂-使用content:attr()實現tableRWD應用篇
下一篇
第11車廂-table界的神器!DataTables介紹篇(1)
系列文
快搭上姐姐的`微`前端便車30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
eszerfrm
iT邦新手 5 級 ‧ 2023-08-08 14:04:18

特別登入來感謝妳,這整系列的教學完整又生動
感謝妳無私地分享喔

https://memeprod.sgp1.digitaloceanspaces.com/user-wtf/1582643046162.jpg

我要留言

立即登入留言